<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="moduleAdd"><i class="el-icon-plus"></i>模块</el-button>
      <el-button type="primary" @click="moduleSort">顺序调整</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司" v-if="isBranch">
        <el-select v-model="formInline.branchId" style="width: 180px" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司" v-else>
        <el-input v-model="this.branchName" disabled></el-input>
      </el-form-item>
      <el-form-item label="页面">
        <el-select v-model="formInline.pageId" style="width: 180px" filterable clearable>
          <el-option
            v-for="item in viewList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客资类型">
        <el-select v-model="formInline.userType" style="width: 200px" filterable clearable>
          <el-option
            v-for="item in clientList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.state" style="width: 200px" @change="stateChange" filterable clearable>
          <el-option label="草稿" value="1"></el-option>
          <el-option label="新建待审核" value="2"></el-option>
          <el-option label="待上线" value="3"></el-option>
          <el-option label="上线" value="4"></el-option>
          <el-option label="编辑待审核" value="5"></el-option>
          <el-option label="下线待审核" value="6"></el-option>
          <el-option label="下线" value="7"></el-option>
          <el-option label="待下线" value="8"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="id"
        show-overflow-tooltip
        label="ID"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="模块名称"
        show-overflow-tooltip
        align="center"
        width="240">
      </el-table-column>
      <el-table-column
        prop="pageName"
        label="对应页面"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="userTypeName"
        label="客资类型"
        show-overflow-tooltip
        align="center"
        width="190">
      </el-table-column>
      <el-table-column
        prop="stateName"
        label="状态"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="200">
        <template scope="scope">
          <el-button @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '待上线' || scope.row.stateName === '上线'" @click="handle(scope.$index, scope.row, $event)" size="small">编辑</el-button>
          <el-button v-if="scope.row.stateName === '待上线' || scope.row.stateName === '上线'" @click="handle(scope.$index, scope.row, $event)" size="small">下线</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '新建待审核' || scope.row.stateName === '下线'" @click="handle(scope.$index, scope.row, $event)" size="small">删除</el-button>
          <el-button v-if="scope.row.stateName === '新建待审核' || scope.row.stateName === '编辑待审核' || scope.row.stateName === '下线待审核'" @click="handle(scope.$index, scope.row, $event)" size="small">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--下线弹窗-->
    <el-dialog title="下线操作" size="small" :visible.sync="stopDialog">
      <el-form :model="stopForm" style="margin-top: 20px" label-width="160px">
        <el-form-item label="下线类型" required>
          <el-select v-model="stopForm.offlineMode" style="width: 230px" placeholder="请选择">
            <el-option label="审核通过后生效" value="1"></el-option>
            <el-option label="定时生效" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="定时时间" v-show="stopForm.offlineMode === '2'" required>
          <el-date-picker
            v-model="stopForm.offlineTime"
            type="datetime"
            value-format="yyyy-MM-dd-HH-mm-ss"
            :picker-options="pickerOptions"
            @change="timeChange"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下线说明" style="width: 500px">
          <el-input type="textarea" v-model="stopForm.offlineComment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="makeSure">确 定</el-button>
        <el-button @click="stopDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!--详情弹窗-->
    <el-dialog title="详情" :visible.sync="detailDialog" top="10%" class="detail-info">
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="编辑前" name="before">
            <div class="form-item">
              <pre style="margin-left: -50px; margin-bottom: -20px; line-height: 25px">
                状态：{{detailData.oldData.stateName}}
                模块名称：{{detailData.oldData.name}}
                模板标识：{{detailData.oldData.newTemplate.markId}}
                模板名称：{{detailData.oldData.newTemplate.name}}
                模版图片：
                          <img :src="this.imgHost + '/' + detailData.oldData.newTemplate.image" style="width:160px;height:100px" alt="">

                分公司：{{detailData.oldData.branchName}}
                客资类型：{{detailData.oldData.userTypeName}}
                页面名称：{{detailData.oldData.pageName}}
                上线类型：{{detailData.oldData.onlineModeName}}
                上线生效时间：{{detailData.oldData.online_time}}
                上线备注：{{detailData.oldData.onlineComment}}
                下线类型：{{detailData.oldData.offlineModeName}}
                下线生效时间：{{detailData.oldData.offline_time}}
                下线备注：{{detailData.oldData.offlineComment}}
                创建人：{{detailData.oldData.createUser}}
                创建时间：{{detailData.oldData.createTime}}
                编辑人：{{detailData.oldData.updateUser}}
                编辑时间：{{detailData.oldData.updateTime}}
                审核人：{{detailData.oldData.auditor}}
                审核时间：{{detailData.oldData.auditTime}}
              </pre>
            </div>
            <div class="form-item">
              <h4>模块配置</h4>
              <el-table :data="detailData.oldData.newModelContents" border width="100%">
                <el-table-column prop="sortId" label="编号" align="center" width="90"></el-table-column>
                <el-table-column prop="comment" label="相关说明" width="300" align="center"></el-table-column>
                <el-table-column prop="contentId" label="关联内容ID" align="center" width="100"></el-table-column>
                <el-table-column prop="name" label="内容名称" align="center" width="120"></el-table-column>
                <el-table-column label="内容形式" align="center" width="100">
                  <template scope="scope">
                    <span v-if="scope.row.contentMode === 1">商品</span>
                    <span v-if="scope.row.contentMode === 2">跳转链接</span>
                    <span v-if="scope.row.contentMode === 3"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="图片"
                  width="150">
                  <template scope="scope">
                    <img :src="this.imgHost + '/' + scope.row.image" style="width:160px;height:100px;margin:5px 0" alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="内容备注" align="center"></el-table-column>
                <!--<el-table-column prop="ticketName" label="关联广告" align="center" width="100"></el-table-column>-->
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="编辑后" name="after">
            <div class="form-item">
              <pre style="margin-left: -50px; margin-bottom: -20px; line-height: 25px">
                状态：{{detailData.newData.stateName}}
                模块名称：{{detailData.newData.name}}
                模板标识：{{detailData.newData.newTemplate.markId}}
                模板名称：{{detailData.newData.newTemplate.name}}
                模版图片：
                          <img :src="this.imgHost + '/' + detailData.newData.newTemplate.image" style="width:160px;height:100px" alt="">

                分公司：{{detailData.newData.branchName}}
                客资类型：{{detailData.newData.userTypeName}}
                页面名称：{{detailData.newData.pageName}}
                上线类型：{{detailData.newData.onlineModeName}}
                上线生效时间：{{detailData.newData.online_time}}
                上线备注：{{detailData.newData.onlineComment}}
                下线类型：{{detailData.newData.offlineModeName}}
                下线生效时间：{{detailData.newData.offline_time}}
                下线备注：{{detailData.newData.offlineComment}}
                创建人：{{detailData.newData.createUser}}
                创建时间：{{detailData.newData.createTime}}
                编辑人：{{detailData.newData.updateUser}}
                编辑时间：{{detailData.newData.updateTime}}
                审核人：{{detailData.newData.auditor}}
                审核时间：{{detailData.newData.auditTime}}
              </pre>
            </div>
            <div class="form-item">
              <h4>模块配置</h4>
              <el-table :data="detailData.newData.newModelContents" border width="100%">
                <el-table-column prop="sortId" label="编号" align="center" width="90"></el-table-column>
                <el-table-column prop="comment" label="相关说明" width="300" align="center"></el-table-column>
                <el-table-column prop="contentId" label="关联内容ID" align="center" width="100"></el-table-column>
                <el-table-column prop="name" label="内容名称" align="center" width="120"></el-table-column>
                <el-table-column label="内容形式" align="center" width="100">
                  <template scope="scope">
                    <span v-if="scope.row.contentMode === 1">商品</span>
                    <span v-if="scope.row.contentMode === 2">跳转链接</span>
                    <span v-if="scope.row.contentMode === 3"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="图片"
                  width="150">
                  <template scope="scope">
                    <img :src="this.imgHost + '/' + scope.row.image" style="width:160px;height:100px;margin:5px 0" alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="内容备注" align="center"></el-table-column>
                <!--<el-table-column prop="ticketName" label="关联广告" align="center" width="100"></el-table-column>-->
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
    <!--排序弹窗-->
    <el-dialog title="顺序调整" :visible.sync="dialogSort">
      <el-table
        :data="sortTable"
        border
        style="width: 100%">
        <el-table-column
          prop="modelName"
          label="栏目名称"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="stateName"
          label="状态"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="sortId"
          label="原排序"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          label="新排序"
          align="center">
          <template scope="scope">
            <el-input @blur="sortTest(scope.row.newSortId, scope.$index)" style="" v-model="scope.row.newSortId"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sortSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { apiHost } from '../../../config/settings.js'
  import { getInfo, column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  import Vue from 'vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        imgHost: '',
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < new Date().getTime() - 8.64e7
          }
        },
//      查询条
        formInline: {
          branchId: '',
          pageId: '',
          userType: '',
          state: ''
        },
        clientList: [],
        viewList: [],
//      表格
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
//      下线弹窗
        stopDialog: false,
        stopForm: {
          offlineMode: '1',
          offlineComment: '',
          offlineTime: ''
        },
//      编辑待审核-详情弹窗
        activeName: 'after',
        detailDialog: false,
        detailData: {
          oldData: {
            newTemplate: {},
            newModelContents: {}
          },
          newData: {
            newTemplate: {},
            newModelContents: {}
          }
        },
//      顺序调整弹窗
        dialogSort: false,
        sortTable: []
      }
    },
    methods: {
      stateChange (val) {
        this.pageData.page = 1
      },
      sortTest (val, index) {
        if (isNaN(val)) {
          this.$message({
            showClose: true,
            message: '请输入纯数字',
            type: 'error'
          })
          this.sortTable[index].newSortId = ''
          Vue.set(this.sortTable, index, this.sortTable[index])
        }
      }, // 输入排序的验证
      moduleSort () {
        if (this.formInline.pageId === '') {
          this.$message({
            showClose: true,
            message: '请先选择页面',
            type: 'error'
          })
          return false
        }
        const sortData = {
          branchId: this.formInline.branchId,
          pageId: this.formInline.pageId
        }
        column.modules.sortList(sortData, (res) => {
          console.log(res, '排序数据')
          if (res.message === 'ok') {
            this.sortTable = res.content
            this.sortTable.forEach((item, index) => {
              item.newSortId = item.sortId
            })
            this.dialogSort = true
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      sortSubmit () {
        const newData = this.sortTable
        newData.forEach((item, index) => {
          item.sortId = item.newSortId
        })
        const _data = {
          modelSortIdList: newData
        }
        column.modules.updateSort(_data, (res) => {
          if (res.message === 'ok') {
            this.dialogSort = false
            this.$message({
              showClose: true,
              message: 'ok',
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      moduleAdd () {
        this.openNewWindow('module_add', '新增模块', 'module_add')
      },
      matchState (res) { // 匹配状态
        if (res) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].state === 1) { res[i].stateName = '草稿' }
            if (res[i].state === 2) { res[i].stateName = '新建待审核' }
            if (res[i].state === 3) { res[i].stateName = '待上线' }
            if (res[i].state === 4) { res[i].stateName = '上线' }
            if (res[i].state === 5) { res[i].stateName = '编辑待审核' }
            if (res[i].state === 6) { res[i].stateName = '下线待审核' }
            if (res[i].state === 7) { res[i].stateName = '下线' }
            if (res[i].state === 8) { res[i].stateName = '待下线' }
          }
        }
      },
      onSubmit (val) {
        // this.pageData.page = 1
//        if (val && typeof (val) === 'number') {
//          this.pageData.page = val
//        } else {
//          this.pageData.page = 1
//        }
        this.isLoading = true
        var _data = Object.assign(this.formInline, this.pageData)
        column.modules.list(_data, (res) => {
          console.log(res, '模块分页')
          if (res.message === 'ok') {
            this.tableData = res.content.content
            this.total = res.content.count
//            this.pageData.page = res.content.page
            this.matchState(this.tableData)
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: '查询失败',
              type: 'error'
            })
          }
        })
      },
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      },
      handle (index, row, event) {
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            if (row.state !== 5) {
              this.openNewWindow('module_detail', '模块详情', 'module_detail', row.id)
            } else {
              this.activeName = 'after'
              column.modules.detail({id: row.id, type: row.state}, (res) => {
                console.log(res)
                if (res.message === 'ok') {
                  this.detailData.oldData = res.content.old
                  this.detailData.newData = res.content.edit
                  this.detailDialog = true
                } else {
                  this.$message({
                    showClose: true,
                    message: '查看详情失败',
                    type: 'error'
                  })
                }
              })
            }
            break
          case '编辑':
            this.openNewWindow('module_edit', '编辑模块', 'module_add', row)
            break
          case '删除':
            column.modules.cancel({id: row.id}, res => {
              if (res.message === 'ok') {
                this.onSubmit()
                this.$store.dispatch('moduleCheckState', this.$store.state.updateState.moduleCheckState + 1)
              }
            })
            break
          case '撤销':
            const datas = {
              id: row.id,
              type: row.state
            }
            column.modules.revoke(datas, res => {
              if (res.message === 'ok') {
                this.onSubmit()
                this.$store.dispatch('moduleCheckState', this.$store.state.updateState.moduleCheckState + 1)
              }
            })
            break
          case '下线':
            this.stopForm.id = row.id
            this.stopForm.status = row.state
//          重置
            this.stopForm.offlineMode = '1'
            this.stopForm.offlineComment = ''
            this.stopForm.offlineTime = ''
            this.stopDialog = true
            break
        }
      },
      makeSure () {
        if (this.stopForm.offlineMode === '2') {
          if (this.stopForm.offlineTime === '') {
            this.$message({
              showClose: true,
              message: '请设置下线定时时间',
              type: 'error'
            })
            return false
          } else if (new Date(this.stopForm.offlineTime).getTime() < new Date().getTime()) {
            this.$message({
              showClose: true,
              message: '定时时间应晚于当前时间',
              type: 'error'
            })
            this.stopForm.offlineTime = ''
            return false
          }
        } // 下线定时时间验证
        column.modules.offLine(this.stopForm, res => {
          if (res.message === 'ok') {
            this.stopDialog = false
            if (this.tableData.length === 1) {
              this.pageData.page = 1
            }
            this.onSubmit()
            this.$store.dispatch('moduleCheckState', this.$store.state.updateState.moduleCheckState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },     // 下线
      timeChange (val) {
        this.stopForm.offlineTime = val
      } // 下线时间变化
    },
    computed: {
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      update_state: function () {
        return this.$store.state.updateState.moduleState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      this.formInline.branchId = this.branchId
      this.imgHost = apiHost.imgHost
      getInfo.client({}, (res) => {
        if (res.message === 'ok') {
          this.clientList = res.content.content
        }
      })
      column.modules.viewList({}, res => {
        if (res.message === 'ok') {
          this.viewList = res.content.allPages
        }
      })
      this.onSubmit()
    }
  }
</script>
<style>
</style>
